<template>
	<view class="">
		<scroll-view scroll-y="true"  ref="chatBoxRef" :scroll-into-view="toView" style="height: 420px;" > 
		<view class="head">
			<view class="flexs">
				<view class="flexCenter">
					<view class=""><image class="logo" :src="detail.avatar" mode=""></image> </view>
					<view class="nickname">
						{{detail.user_nicename}} 
						<!-- <text class="position">定位</text> -->
					</view>
				</view>
				<view class="guanzhu" @click="collectany(detail.id)">
					收藏
				</view>
			</view>
			<!-- <view class="">
				<image class="photo" src="/static/电话.png" mode=""></image>
			</view> -->
			<view class="flexs">
				<view class="flexCenter">
					<view class=""><image class="noice" src="../static/main/02.png" mode=""></image> </view>
					<view class="canliao">
						{{detail.birthday}} ● {{detail.character}} ● {{detail.rise}}
					</view>
				</view>
				<view class="">
					
					<view class="flexCenter" style="font-size: 30rpx;">
						<image class="noice" src="../static/main/13.png" mode=""></image>
						拉黑
					</view>
				</view>
			</view>
			
			
		</view>
		<view class="messageHead">
			<view v-for="(item,index) in msgdata" :key="index"  :id="'message_' + index">
				<view class="messageDate">
					{{item.create_time}}
				</view>
				<view class="flexCenter" v-if="item.uid==touid">
					
					<image class="logo" :src="detail.avatar" mode=""></image>
					<view class="leftText">
						{{item.content}}
					</view>
				</view>
				<view class="flexCenter" style="justify-content: flex-end;" v-else>
					
					<view class="rightText">
						{{item.content}}
					</view>
					<image class="logo" style="margin: 0 0 0  20rpx;" :src="myavatar" mode=""></image>
				</view>
			</view>
		</view>
		</scroll-view>  
		<view class="" style="height: 200rpx;">
			
		</view>
		<view class="positionFlex">
			<view class="messageHead" style="margin:0 auto 0 ;">
				<view class="flexCenter">
					<view class="messagetab" v-for="(item,index) in messageTab" @click="quicksend(item)">
						{{item.name}}
					</view>
				</view>
				<view class="flexCenter">
					<!-- <image class="photo" style="margin-right: 20rpx;" src="../static/main/04.png" mode=""></image> -->
					<input class="messageInput" type="text" placeholder="输入消息内容..." v-model="message"/>
					
					<view  v-if="message" @click="sendMessageToWebSocket()">
						<image style="margin-left: 20rpx;" class="sendbtn" src="/static/send.png" mode=""></image>
					</view>
				</view>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import $api from '@/api/index.js';
	export default {
		
		data() {
			return {
				message:'',
				messageTab:[
					{name:'hello'},
					{name:'你好'},
					{name:'在吗'}
				],
				myavatar:'',
				touid:0,
				uid:0,
				detail:{},
				msgdata:[],
				 socketTask: null,
				 toView:''
			}
		},
		onLoad(option)
		{
			this.touid = option.id
			this.gettouserinfo(this.touid)
			let myinfo = uni.getStorageSync('userInfo')
			this.myavatar = myinfo.avatar
			this.uid = myinfo.id
			this.connectWebSocket()
			this.gethistory(option.id)
			this.getquickreply()
		},
		methods: {
			async  gettouserinfo(touid)
			{
				let param = {
					touid: this.touid,
				}
				let data = await $api.user.touserInfo(param)
				this.detail = data
			},
			async gethistory(touid)
			{
				let param = {
					touid: this.touid,
				}
				let ltdata = await $api.user.chathistory(param)
				this.msgdata = ltdata
				if(this.msgdata.length>0){
					this.toView = 'message_' + (this.msgdata.length - 1); 
				}
				
			},
			async getquickreply()
			{
				let param = {
					uid:this.uid,
				}
				let quickdata = await $api.user.getquickreply(param)
				this.messageTab = quickdata
			},
			async collectany(uid){
				let param = {
					cid: uid,
					type:1
				}
				let data = await $api.user.collectanything(param)
				
			},
			connectWebSocket() {
				let that =this
			      this.socketTask = uni.connectSocket({  
			        url: 'wss://chat.bbi-love.com/wss', // 替换为你的WebSocket服务器地址  
			      });  
			  
			      // 监听WebSocket连接打开事件  
			      uni.onSocketOpen(function (res) {
			        console.log('WebSocket连接已打开！');
			      });
			  
			      // 监听WebSocket接收消息事件  
				  uni.onSocketMessage(function (res) {
				    console.log('收到服务器内容：' + res.data);
					let data2 = JSON.parse(res.data);
					let now = new Date();
				 
					let hours = now.getHours();  
					let minutes = now.getMinutes();  
					if(data2.from == that.uid)
					{
											  let newobj = {"content":data2.content,
											  "uid":that.uid,
											  "touid":that.touid,
											  "create_time":hours+":"+minutes};
											  that.msgdata.push(newobj);
					}else{
											  let newobj = {"content":data2.content,
											  "uid":that.touid,
											  "touid":that.uid,
											  "create_time":hours+":"+minutes};
											  that.msgdata.push(newobj);
					}
					that.toView = 'message_' + (that.msgdata.length - 1);  
					    
				  });
			     
			  
			      // 监听WebSocket连接关闭事件  
			      uni.onSocketClose(function (res) {
			        console.log('WebSocket 已关闭！');
			      });
			  
			      // 监听WebSocket连接错误事件  
			      uni.onSocketError(function (res) {
			        console.log('WebSocket连接打开失败，请检查！');
			      }); 
				  },
				    sendMessageToWebSocket() { 
						let that =this
				          if (this.socketTask) {  
							  
				            uni.sendSocketMessage({  
								
				              data: '{"from":"'+this.uid+'","type":"say","sendto":"'+this.touid+'","content":"'+this.message+'"}', // 要发送的消息的内容 
							   success: function(res) {
							   		
							   		that.message = ""
							   	}
				            });  
				           
				          } else {  
				            console.error("WebSocket连接未打开或已关闭，无法发送消息");  
				          }  
				        },  
						quicksend(item){
							let that =this
							  if (this.socketTask) {  
								  
							    uni.sendSocketMessage({  
									
							      data: '{"from":"'+this.uid+'","type":"say","sendto":"'+this.touid+'","content":"'+item.name+'"}', // 要发送的消息的内容 
								   success: function(res) {
								   		that.message = ""
								   	}
							    });  
							   
							  } else {  
							    console.error("WebSocket连接未打开或已关闭，无法发送消息");  
							  }  
						}
		}
	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}
	.head {
		width: 640rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx auto 0;
	}
	.flexs {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flexCenter {
		display: flex;
		align-items: center;
	}
	.logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 20rpx;
	}
	.position {
		color: rebeccapurple;
	}
	.guanzhu {
		border-radius: 40rpx;
		border: 1rpx solid firebrick;
		color: firebrick;
		text-align: center;
		font-size: 30rpx;
		width: 120rpx;
		padding: 10rpx;
	}
	.photo {
		width: 40rpx;
		height: 40rpx;
		margin: 20rpx 0;
	}
	.noice {
		margin-right: 20rpx;
		width: 30rpx;
		height: 30rpx;
	}
	.messageDate {
		text-align: center;
		margin: 10rpx 0;
		font-size: 24rpx;
		color: #666;
	}
	.canliao {
		font-size: 28rpx;
	}
	.messageHead {
		width: 690rpx;
		margin:40rpx auto 20rpx;
	}
	.leftText {
		background-color: #fff;
		color: #000;
		/* width: 690rpx; */
		border-radius: 20rpx;
		padding:5rpx 20rpx;
	}
	.rightText {
		background-color: rebeccapurple;
		color: #fff;
		/* width: 690rpx; */
		border-radius: 20rpx;
		padding:5rpx 20rpx;
	}
	.positionFlex {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx 0;
	}
	.messagetab {
		background-color: #666;
		color: #fff;
		padding: 10rpx 20rpx;
		text-align: center;
		margin-right: 20rpx;
		border-radius: 40rpx;
		
	}
	.messageInput {
		padding: 5rpx 20rpx;
		width:80%;
		/* border: 1rpx solid #efefef; */
		background-color: #efefef;
		border-radius: 30rpx;
		
	}
	.sendMessage {
		background-color: rebeccapurple;
		color: #fff;
		padding: 5rpx 20rpx;
		font-size: 28rpx;
	}
	.sendbtn{
		width:25px;
		height: 25px;
	}
	.nickname{
		font-size: 20px;
		color:#800080;
	}
</style>